<template>
  <div class="organize-tree">
    <div class="organize-container">
      <el-scrollbar style="height:100%">
        <el-tree
          ref="organizeRef"
          node-key="id"
          default-expand-all
          :current-node-key="currentNode"
          :data="data"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          @node-click="nodeCheck"
        >
          <template #default="{ node }">
            <el-row class="custom-tree-node" justify="space-between" align="middle">
              <span style="display:inline-flex; align-items:center;">
                <span>{{ node.label }}</span>
                <el-icon @click.stop.prevent="openCard(node)" :color="currentNode == node.data.id ? 'var(--next-color-white)' : 'var(--el-color-primary)'" v-if="node.data.id == '1'" size="16px" style="margin-left:3px"><ele-Postcard /></el-icon>
              </span>
              <span style="margin-left:5px;" class="options_btn" v-show="!node.data.personal">  <!-- 个人没有增删 -->
                <el-button link type="primary" :icon="Plus" size="small" @click.stop.prevent="addNode(node)"></el-button>
                <el-button link type="primary" :icon="Minus" size="small" @click.stop.prevent="delNode(node)" style="margin-left:0"></el-button>
              </span>
            </el-row>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
    <el-row justify="space-between" align="middle" style="border-top:1px solid var(--el-border-color)" v-if="!isHideSetting">
      <div class="col-cell">
        <el-link type="primary" :underline="false" @click="openUserCenter">设置</el-link>
      </div>
      <el-divider direction="vertical" style="height:1.5em" />
      <div class="col-cell">
        <el-link type="primary" :underline="false" @click="logOut">退出登录</el-link>
      </div>
    </el-row>

    <authority-manage v-model:dialogDrawer="authorityManageVisible" :treeData="treeData" @onSubmit="getList"/>

  </div>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router'
import Cookies from 'js-cookie'
import AuthorityManage from "/@/components/organize/AuthorityManage.vue";
import {getDeptTree} from "/@/api/sys/dept"
export default {
  name: 'OrganizeTree',
  components: {
    AuthorityManage
  },
  props: {
    isHideSetting: {
      type: Boolean,
      default: false
    }
  },
  emits: ['onHide'],
  setup(props, context) {
      const organizeRef = ref()
      const router = useRouter()
      const state = reactive({
          authorityManageVisible: false,
          treeData:[],
          data: [{
            id: 1,
            label: '我的全部',
            personal: 1,    // 个人
            isPenultimate: false
          },
          {
            id: 2,
            label: '17科技',
            isPenultimate: false,
            children: [
              {
                id: 5,
                label: '华南区',
                isPenultimate: false,
                children: [{
                  id: 9,
                  label: '广东组',
                  isPenultimate: false,
                  children: [{
                    id: 20,
                    label: '海客教育项目',
                    isPenultimate: false,
                  },{
                    id: 10,
                    label: '李一',
                    personal: 1,    // 个人
                    isPenultimate: false,
                  },{
                    id: 11,
                    label: '小二',
                    personal: 1,    // 个人
                    isPenultimate: false,
                  },{
                    id: 12,
                    label: '罗三',
                    personal: 1,    // 个人
                    isPenultimate: false,
                  }]
                },{
                  id: 21,
                  label: '毕节环保项目',
                  isPenultimate: false,
                }, {
                  id: 22,
                  label: '林美玲',
                  personal: 1,    // 个人
                  isPenultimate: false,
                }]
              },
              {
                id: 6,
                label: '华东区',
                isPenultimate: false
              },
              {
                id: 3,
                label: '西北区',
                isPenultimate: false,
                children: [
                  {
                    id: 7,
                    label: '宁夏组',
                    isPenultimate: false
                  },
                  {
                    id: 8,
                    label: '新疆组',
                    isPenultimate: false
                  },
                ],
              },
              {
                id: 14,
                label: '系统管理员',
                personal: 1,    // 个人
                isPenultimate: false,
              }
            ],
          }],
          currentNode: 1
      })
      const nodeCheck = (node) => {
        console.log(node)
        state.currentNode = node.id
      }
      const logOut = () => {
        ElMessageBox({
					closeOnClickModal: false,
					closeOnPressEscape: false,
					title: '提示',
					message: '此操作将退出登录, 是否继续?',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					buttonSize: 'default',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '退出中';
							setTimeout(() => {
								done();
								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}, 700);
						} else {
							done();
						}
					},
				}).then(async () => {
          // 清除缓存/token等
          Session.clear();
          Cookies.remove('userId')
          Cookies.remove('userName')
          Cookies.remove('enterpriseName')
          // 使用 reload 时，不需要调用 resetRoute() 重置路由
          window.location.reload();
        }).catch(() => {});
      }
      const openUserCenter = () => {
        context.emit('onHide', true)
        router.push({
          path: '/personal/list'
        })
      }
      // 新增
      const addNode = (e) => {
        state.treeData = []
        state.treeData.push(e.data)
        getDeptTree("0").then(res=>{
          state.treeData = res.data
          state.authorityManageVisible = true
        })
      }
      // 删除
      const delNode = (e) => {
        console.log('del => ', e)
      }
      // 查看名片
      const openCard = e => {
        context.emit('onHide', true)
        router.push({
          path: '/card',
          query: {
            id: e.data.id
          }
        })
      }
      //获取树状部门数据
      const getList = () => {

      }
      return {
        ...toRefs(state),
        AuthorityManage,
        organizeRef,
        Plus,
        Minus,
        logOut,
        nodeCheck,
        openUserCenter,
        addNode,
        delNode,
        openCard,
        getList,

      }
  }
}
</script>

<style scoped lang="scss">
.organize-tree {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  .organize-container{
    flex: 1;
  }
  :deep(.is-penultimate > .el-tree-node__content){
    color: var(--next-bg-topBar);
  }
  :deep(.el-tree-node.is-current > .el-tree-node__content) {
    color: var(--next-bg-topBar);
    font-weight: bold;
    background: var(--el-color-primary);
    &:hover {
      .options_btn {
        .el-button {
          color: var(--next-bg-topBar);
        }
      }
    }
  }
  :deep(.el-tree){
    overflow-x: auto;
    height: 100%;
  }
  .custom-tree-node{
    width: 100%;
    flex-wrap: nowrap;
  }
  .col-cell{
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 8px 0;
  }
  .options_btn{
    :deep(.el-button){
      visibility: hidden;
    }
  }
  :deep(.el-tree-node .custom-tree-node){
    &:hover {
      .options_btn {
        .el-button {
          visibility: visible !important;
        }
      }
    }
  }
  :deep(.el-scrollbar .el-scrollbar__wrap) {
    overflow-x: hidden;
  }
  :deep(.el-tree>.el-tree-node){
    min-width: 100%;
    display:inline-block;
  }
  :deep(.el-scrollbar__view){
    height: 100%;
  }

}
</style>
